<!-- Table -->
<template>
  <div>
    <el-button
      type="primary"
      class="addhost"
      icon="el-icon-edit"
      @click="dialogFormVisible = true"
      >添加</el-button>

      <el-dialog title="添加集群" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="集群数量" :label-width="formLabelWidth">
            <el-input-number v-model="form.num" :min="1" :max="50" label="集群数量">
            </el-input-number>
          </el-form-item>

        <el-form-item label="所属用户" :label-width="formLabelWidth">
          <el-select v-model="form.user" placeholder="请选择" @change="change()">
            <el-option
          v-for="item in userOptions"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
          >
          </el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="集群类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择" @change="change()">
            <el-option label="hadoop" value="2"></el-option>
            <el-option label="spark" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcluster">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.addhost {
  display: flex;
  justify-content: flex-end;
}
</style>
<script>
import Axios from "axios";
import qs from "qs";
export default {
  created() {
    this.init();
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        num: 1,
        user: "",
        type: "",
      },
      formLabelWidth: "120px",
      userOptions: [
        {
          id: "",
          username: "",
          nickname: "",
          status: "",
          create_at: "",
          update_at: "",
        },
      ],
    };
  },
  methods: {
    change(){
      this.$forceUpdate()
    },
    addcluster() {
      if(this.form.num == 1){
        Axios.post(
        "/cluster/insert",
        qs.stringify({
          user_id: this.form.user,
          types: this.form.type,
        })
      ).then((res) => {
            if (res.data.state == 1) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
      this.dialogFormVisible = false;
      location.reload();
      }else{
        Axios.post(
        "/cluster/deploy",
        qs.stringify({
          user_id: this.form.user,
          types: this.form.type,
          num: this.form.num,
        })
      ).then((res) => {
            if (res.data.state == 1) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
      this.dialogFormVisible = false;
      location.reload();
      }

    },
    init: function (){
      Axios.get("/user").then((res) => {
        this.userOptions = res.data.msg;
      });
    }
  },
};
</script>